/**
 * Created by thomas on 2017/5/7.
 */
/**
 * Created by thomas on 2017/5/2.
 */
import Loading from "./loading_page";
import limit from "./limit_scroll";
import React,{Component} from 'react';
import { withRouter } from 'react-router-dom'
let pre_scroll_top = 168;
class Height extends React.Component{
    constructor(props) {
        super(props);
        this.state= {
            first:true,
            fix_num:0.1,
            img_path:sessionStorage.getItem("img_path"),
            couut_i:21,
            pre_sroll_top:168,
            hid_load:true
        };
    }
    XHR() {
        let xhr;
        try {xhr = new XMLHttpRequest();}
        catch(e) {
            let IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
            for (let i=0,len=IEXHRVers.length;i< len;i++) {
                try {xhr = new ActiveXObject(IEXHRVers[i]);}
                catch(e) {continue;}
            }
        }
        return xhr;
    }
    change_ul(e){
        let op_id=document.getElementById("user_opid").getAttribute("data-id");
        sessionStorage.setItem("op_id",op_id);
        let xhr = this.XHR();
        // http://woxiaoshitang.com/activity/health.php/Index/ajaxsetuserinfo
        xhr.open("post","http://woxiaoshitang.com/activity/health.php/Index/ajaxsetuserinfo",true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState==4 && xhr.status ==200) {
                let josn=JSON.parse(xhr.responseText);
                if(josn.message === 1){
                    sessionStorage.setItem("mess",xhr.responseText);
                    setTimeout(()=>{
                        this.props.history.push(e);
                    },300)
                }else{
                    alert("提交失败");
                    this.setState({
                        hid_load:true
                    })
                    return;
                }
            }
        }.bind(this);
        //比GET请求多了一步
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //另外,数据是通过send方法发送的
        let sex=sessionStorage.getItem("sex");
        if(sex === "man"){
            sex = 1
        }else{
            sex = 0
        }
        op_id=op_id.replace(/\s/g,"");
        xhr.send("sex="+sex+"&weight="+sessionStorage.getItem("weight")+"&height="+sessionStorage.getItem("height")+"&age="+this.refs.age_n.innerText+"&openid="+op_id)
        //sessionStorage.setItem("age",this.refs.age_n.innerText);
    }
    get_age(e){
        // document.getElementsByClassName("now_age")[0].innerText= e
    }
    change_num(e){
      let  scl = e.refs.wrap_age.scrollTop;
        // console.log( e.refs.wrap_age.scrollTop)
        // if(( e.refs.wrap_age.scrollTop -28 )% 80 == 0){
        //
        //     this.setState({
        //         couut_i:++this.state.couut_i
        //     })
        // }
        if(scl >28 && scl < 90){
           // e.refs.wrap_age.scrollTop = 35;
            this.setState({
                    couut_i:18
            })
        }else if(scl > 90 && scl <160 ){
            //e.refs.wrap_age.scrollTop = 108.5;
            this.setState({
                couut_i:19
            })
        }else if(scl > 160 && scl<240){
           // e.refs.wrap_age.scrollTop = 189.5;
            this.setState({
                couut_i:20
            })
        }else if(scl > 240 && scl < 320){
          //  e.refs.wrap_age.scrollTop = 267.5;
            this.setState({
                couut_i:21
            })
        }else if(scl >320 && scl < 400){
          //  e.refs.wrap_age.scrollTop = 343.5;
            this.setState({
                couut_i:22
            })
        }else if(scl > 400 && scl < 480){
          //  e.refs.wrap_age.scrollTop = 423;
            this.setState({
                couut_i:23
            })
        }else if(scl > 480 && scl < 560){
           // e.refs.wrap_age.scrollTop = 504.5;
            this.setState({
                couut_i:24
            })
        }else if(scl > 560 && scl < 640){
          //  e.refs.wrap_age.scrollTop = 586;
            this.setState({
                couut_i:25
            })
        }else if(scl > 640 && scl < 720){
           //e.refs.wrap_age.scrollTop = 663
            this.setState({
                couut_i:26
            })
        }else if(scl > 720 && scl < 800){
            //e.refs.wrap_age.scrollTop = 751
            this.setState({
                couut_i:27
            })
        }else if(scl > 800 && scl < 880){
           // e.refs.wrap_age.scrollTop = 824.5
            this.setState({
                couut_i:28
            })
        }else if(scl > 880 && scl < 960){
            this.setState({
                couut_i:29
            })
        }else if(scl > 960 && scl < 1040){
            this.setState({
                couut_i:30
            })
        }else if(scl > 1040 && scl < 1120){
            this.setState({
                couut_i:31
            })
        }else if(scl > 1120 && scl < 1200){
            this.setState({
                couut_i:32
            })
        }else if(scl > 1180 && scl < 1260){
            this.setState({
                couut_i:33
            })
        }else if(scl > 1260 && scl < 1340){
            this.setState({
                couut_i:34
            })
        }else if(scl > 1340 && scl < 1420){
            this.setState({
                couut_i:35
            })
        }else if(scl > 1420 && scl < 1500){
            this.setState({
                couut_i:36
            })
        }else if(scl > 1500 && scl < 1580){
            this.setState({
                couut_i:37
            })
        }else if(scl > 1580 && scl < 1660){
            this.setState({
                couut_i:38
            })
        }else if(scl > 1660 && scl < 1740){
            this.setState({
                couut_i:39
            })
        }else if(scl > 1740 && scl < 1820){
            this.setState({
                couut_i:40
            })
        }
    }
    setToolbar(){
        let tools = [];
        for( let i = 17; i < 42; i++ ){
            if( i == 17||i == 41){
                tools.push(
                    <div  key={i} className="c_age"
                          ref={"age"+i}
                    >&nbsp;</div>);
                continue
            }
            tools.push(
            <div  key={i} className="c_age"
              onClick={() => this.get_age(i)}
                 ref={"age"+i}
            >{i}</div>);
        }
        return tools;
    }
    touch_end_magnetic(e){
        //超过一定距离就 alert
        if(e.refs.wrap_age.scrollTop - this.state.touch_length < 50 && e.refs.wrap_age.scrollTop - this.state.touch_length > -50 ){
           //console.log("_+_+_+_+ oh fuck you bitch 1FFF");
             e.refs.wrap_age.scrollTop = this.state.touch_length
        }
    }
    touch_start_magnetoc(e){
         let couut_i = this.state.couut_i - 18;
         let length_of_scroll = 40 + couut_i * 80 ;//起始 40 // 80是每一个的距离
        //先存起 开始的 scrollTop
        this.setState({
            touch_length:length_of_scroll
        })
    }
    componentDidMount(){
        this.refs.wrap_age.scrollTop=268;
        let contain =this.refs.contain;
        let wrap_age= this.refs.wrap_age;
        limit(wrap_age ,contain );
    }
    render() {
        return (
            <div className="age_contain" ref="contain">
                <Loading hid_load={this.state.hid_load}/>
                <div className="age_top">
                   <div className="age_data">
                       你的年龄
                   </div>
                    <div className="now_age" ref="age_n">
                        {this.state.couut_i}
                    </div>
                </div>
                <div className="input_age">
                    <div className="wrap_age" ref="wrap_age"
                         onScroll={() => this.change_num(this)}
                         onTouchEnd={()=>{this.touch_end_magnetic(this)}}
                         onTouchStart={()=>{this.touch_start_magnetoc(this)}}
                         >
                        {this.setToolbar()}
                    </div>
                </div>
                <div onClick={(e) =>{
                    e.stopPropagation();
                    this.change_ul("/sandwiches")
                }} className="next_step" style={{top:"42rem"}}>完成</div>
            </div>
        );
    }
}
export default withRouter(Height);
